<template>
  <view 
    class="card" 
    :style="{
      transform: `scale(${scale})`,
      opacity: opacity
    }"
  >
    <!-- 文字告白模板 -->
    <template v-if="item.type === 'text'">
      <view class="text-template" :style="templateStyle">
        <text class="content">{{ item.content }}</text>
        <text class="author">- {{ item.anonymous ? '匿名' : item.author }}</text>
      </view>
    </template>
    
    <!-- 图片告白 -->
    <template v-else-if="item.type === 'image'">
      <image-viewer :images="item.images" />
    </template>
    
    <!-- 视频告白 -->
    <template v-else-if="item.type === 'video'">
      <video 
        :src="item.videoUrl" 
        controls
        autoplay
        :muted="index !== currentIndex"
        class="video-content"
      ></video>
    </template>
    
    <!-- 标签云 -->
    <view class="tag-cloud">
      <view 
        v-for="tag in item.tags" 
        :key="tag"
        class="tag"
        :style="{
          backgroundColor: getTagColor(tag)
        }"
      >
        #{{ tag }}
      </view>
    </view>
    
    <!-- 热浪效果 -->
    <heat-wave v-if="item.heat > 1000" :heat="item.heat" />
  </view>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
    currentIndex: Number
  },
  computed: {
    // 当前卡片缩放比例
    scale() {
      const distance = Math.abs(this.index - this.currentIndex)
      return 1 - distance * 0.05
    },
    // 当前卡片透明度
    opacity() {
      const distance = Math.abs(this.index - this.currentIndex)
      return 1 - distance * 0.3
    },
    // 文字模板样式
    templateStyle() {
      return {
        backgroundImage: `url(${this.item.template})`,
        color: this.item.fontColor || '#fff'
      }
    }
  },
  methods: {
    getTagColor(tag) {
      // 根据标签返回不同颜色
      const colors = ['#FF5C8D', '#FF7EB3', '#FFB8D1', '#D4A5A5', '#A5D7D7']
      const index = tag.length % colors.length
      return colors[index]
    }
  }
}
</script>

<style scoped>
.card {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.text-template {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  background-size: cover;
  background-position: center;
}

.content {
  font-size: 36rpx;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20rpx;
}

.author {
  font-size: 28rpx;
  align-self: flex-end;
}

.tag-cloud {
  position: absolute;
  bottom: 120rpx;
  left: 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.tag {
  margin: 5rpx;
  padding: 5rpx 10rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: white;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
}

.video-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>